<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> Stu Nicholls | CSSplay | Flexible equal height 3 columns </title>
<meta name="Author" content="Stu Nicholls">
<meta name="Keywords" content="style, cascading, sheets, Experiments, code, CSSplay, Stu, Nicholls, demonstrations, menus, layouts, flexible, multi-column, equal height">
<meta name="Description" content="CSS only flexible widths with equal height columns">
<meta http-equiv="imagetoolbar" content="no">

<style type="text/css">
body {font-size:76%; font-family:"trebuchet MS", verdana, arial, sans-serif; background:#f0f0f0; word-wrap:break-word;}

#header {background:#a31e39;}

#outer1 {float:left; width:20%; background:#e0d0d0;}
#outer2 {float:left; width:60%; background:#c0c0c0;}
#outer3 {float:right; width:20%; background:#b0b0b0;}
#outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}

#wrapper {overflow:hidden; background:#c0c0c0;}


#footer {clear:both; background:#455c5a;}

h1 {font-size:20px; margin:0; padding:10px 0; color:#fff;}
h3 {font-size:18px; margin:0; padding:8px 0;}
.content {padding:10px;}
p {font-size:12px; line-height:1.5em; margin:0; padding:5px 0;}
#footer p,
#header p {color:#fff;}
#footer a {color:#fff;}
#footer a:hover {text-decoration:none;}
</style>

<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
#outer2 {float:left; width:59.8%; background:#c0c0c0;}

/* for IE6 */
* html #wrapper {display:inline-block;}
</style>
<![endif]-->

</head>

<body>
		<div id="header">
			<div class="content">
				<h1>CSS play - SIMPLE Flexible Layout - 3 columns all percentage widths</h1>
				<p>Resize you browser window and watch it stay in shape. NO graphics
 have been used in this demonstration (except for the 'Donate' button).</p>
			</div>
		</div> <!-- end header -->

		<div id="wrapper">
			<div id="outer1">
				<div class="content">
					<h3>Left 20%</h3>
					<p>Pellentesque id metus. Aenean suscipit sapien et nibh. 
Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit 
luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus 
ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. 
Nulla suscipit pellentesque lacus.</p>
					<p>Pellentesque id metus. Aenean suscipit sapien et nibh. 
Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit 
luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus 
ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. 
Nulla suscipit pellentesque lacus.</p>
					<p>Pellentesque id metus. Aenean suscipit sapien et nibh. 
Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit 
luctus risus. Ut mollis pretium nisl.</p>
				</div> <!-- end content -->
			</div>


			<div id="outer2">
				<div class="content">
					<h3>Center 60%</h3>
					<p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p>
					<p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p>
				</div> <!-- end content -->
			</div> <!-- end outer2 -->


			<div id="outer3">
				<div class="content">
					<h3>Right 20%</h3>
					<p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p>
					<p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p>
					<p>All three columns will end at the footer.</p>
				</div> <!-- end content -->
			</div> <!-- end outer2 -->



		</div><!-- end #wrapper -->

		<div id="footer">
			<div class="content">
				<p>Copyright ©2009 stu nicholls - cssplay.co.uk | <a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Flexible%203Cols" accesskey="C" title="Comments for this Layout">comments on these layouts</a></p>
				<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
					<div>
						<input name="cmd" value="_s-xclick" type="hidden">
						<input name="hosted_button_id" value="2928152" type="hidden">
						<input src="layout_files/paypal.png" name="submit" alt="" type="image">
						<img alt="" src="layout_files/pixel.gif" width="1" height="1">
					</div>
				</form>
			</div>
		</div> <!-- end footer -->



</body></html>